import React, { useState, useEffect } from "react";
import {
  Button,
  Form,
  Input,
  Select,
  Row,
  Col,
  Space,
  Collapse,
  CollapseProps,
} from "antd";
import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons";
import styles from "./index.less";
import lodash from "lodash";
import { productList } from "./util";
const { Option } = Select;
const { Panel } = Collapse;
export default (props: any) => {
  const [form] = Form.useForm();
  const [formList] = Form.useForm();
  const [addform] = Form.useForm();
  const [addModal, setAddModal] = useState(false);
  const [itemInputList, setItemInputList] = useState([]);
  const [productListCol, setProductListCol] = useState(productList);

  // 编辑modal确定
  const handleConfirmFormOnfinish = (values: any) => {
    console.log(values, "values");

    
  }; 
  useEffect(() => {
    formList.setFieldValue("AAA", [
      { code: "111", version: "222" },
      { code: "111", version: "222" },
    ]);
  });
  return (
    <>
      <Form
        form={formList}
        preserve={false}
        onFinish={handleConfirmFormOnfinish}
      >
        <Collapse
        //  items={items}
        >
          {productListCol?.map((item: any, index) => {
            if (item.appList && item.appList.length > 0) {
              let thisItem = [];
              item.appList.map((ele: any) => {
                thisItem.push({
                  key: item.code,
                  name: item.code,
                  code: item.code,
                  appName: ele.name,
                  appVersion: ele.version,
                });
              });
              formList.setFieldValue(item.code, thisItem);
            }

            return (
              <Panel header={item.name} key={item.code}>
                <Row justify="start" gutter={24}>
                  <Col span={8}>
                    <Form.Item
                      // key={item.code+"1"}
                      initialValue={item.code}
                      label="产品码"
                      name={item.code + "code"}
                      // name="code"
                    >
                      <Input disabled />
                    </Form.Item>
                  </Col>
                  <Col span={16}>
                    <Form.Item
                      label="产品版本"
                      initialValue={item.versionId}
                      name={item.code + "version"}
                      // name="version"
                    >
                      <Input
                        style={{ width: "90%" }}
                        placeholder="请输入产品版本"
                      />
                    </Form.Item>
                  </Col>
                </Row>
                <Form.Item label="应用列表"></Form.Item>
                <Form.List key={Math.random()} name={item.code}>
                  {(fields, { add, remove }) => (
                    <>
                      {fields.map((field, index) => (
                        <Space style={{ display: "flex" }} align="baseline">
                          <Form.Item {...field} name={[index, "appName"]}>
                            <Input placeholder="应用名" />
                          </Form.Item>
                          <Form.Item {...field} name={[index, "appVersion"]}>
                            <Input placeholder="应用版本" />
                          </Form.Item>
                          {fields.length > 1 ? (
                            <MinusCircleOutlined
                              onClick={() => remove(field.name)}
                            />
                          ) : null}
                        </Space>
                      ))}
                      <Form.Item>
                        <Button
                          type="dashed"
                          onClick={() => add()}
                          icon={<PlusOutlined />}
                          style={{ width: "90%" }}
                        >
                          添加应用
                        </Button>
                      </Form.Item>
                    </>
                  )}
                </Form.List>
              </Panel>
            );
          })}
        </Collapse>
        <br />
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>

      <br />
    </>
  );
};